<template>
  <div class="container">
    <el-form :model="formInline" label-width="100px">
      <el-form-item label="上架模式">
        <el-switch v-model="formInline.isOpen" />
      </el-form-item>
      <el-form-item label="自定义导航栏">
        <div class="width100">
          <div class="actionBtn" @click="formInline.navs.push({ name: '', path: '' ,color:''})">
            <el-button type="primary" plain>新增</el-button>
          </div>
          <div class="grids gridColumns5 campusEnvironmentBox nav" v-for="(item, index) in formInline.navs" :key="index">
            <el-input v-model="item.name" placeholder="请输入导航栏标题" />
            <el-input v-model="item.path" placeholder="请输入超链接" />
            <el-color-picker v-model="item.color" />
            <el-button type="danger" icon="Delete" circle @click="formInline.navs.splice(index, 1)" />
          </div>
        </div>
      </el-form-item>
      <el-form-item label="首页轮播图">
        <div>
          <div class="actionBtn">
            <el-button type="primary" plain @click="proxy.$refs.uploadImageRef.inputClick()">新增</el-button>
            （建议尺寸1920*600）
          </div>
          <div class="banners grids gridColumns5 campusEnvironmentBox">
            <div class="banner-box" v-for="(item, index) in formInline.banners" :key="index">
              <div class="close flex" @click="formInline.banners.splice(index, 1)">
                <el-icon color="#fff">
                  <Close />
                </el-icon>
              </div>
              <div class="imgUrl" @click.stop="proxy.$refs.uploadImageRef.showPreview(item.imgUrl)">
                <img :src="item.imgUrl" alt="">
              </div>
              <el-input v-model="item.sort" type="number" placeholder="请输入排序">
                <template #prepend>排序</template>
              </el-input>
              <div class="flex" style="margin-top: 8px">状态：
                <el-radio-group v-model="item.show">
                  <el-radio label="0">隐藏</el-radio>
                  <el-radio label="1">显示</el-radio>
                </el-radio-group>
              </div>
              <div style="margin-top: 5px">
                <courseTypCascader v-model="item.type"></courseTypCascader>
              </div>
            </div>

            <uploadImage ref="uploadImageRef" v-model="addBannerImgUrl" v-show="false"></uploadImage>
          </div>
        </div>
      </el-form-item>
      <el-form-item label="公司名称">
        <el-input v-model="formInline.companyName" placeholder="请输入公司名称" />
      </el-form-item>
      <el-form-item label="咨询电话">
        <el-input v-model="formInline.consultationTel" placeholder="请输入咨询电话" />
      </el-form-item>
      <el-form-item label="咨询时间">
        <el-input v-model="formInline.consultationTime" placeholder="请输入咨询时间" />
      </el-form-item>
      <el-form-item label="公司邮箱">
        <el-input v-model="formInline.mailbox" placeholder="请输入公司邮箱" />
      </el-form-item>
      <el-form-item label="公司地址">
        <el-input v-model="formInline.address" placeholder="请输入公司地址" />
      </el-form-item>
      <el-form-item label="微信公众号">
        <uploadImage v-model="formInline.wxQr"></uploadImage>
      </el-form-item>
      <el-form-item label="校区环境">
        <!-- <uploadImage v-model="formInline.campusEnvironment" valType="arr" size="250" :limit="9"></uploadImage> -->
        <div>
          <div class="actionBtn">
            <el-button type="primary" plain @click="proxy.$refs.campusEnvironmentRef.inputClick()">新增</el-button>
            （建议尺寸1660*1245）
          </div>
          <div class="banners grids gridColumns5 campusEnvironmentBox">
            <div class="banner-box" v-for="(item, index) in formInline.campusEnvironment" :key="index">
              <div class="close flex" @click="formInline.campusEnvironment.splice(index, 1)">
                <el-icon color="#fff">
                  <Close />
                </el-icon>
              </div>
              <div class="imgUrl" @click.stop="proxy.$refs.uploadImageRef.showPreview(item)">
                <img :src="item" alt="">
              </div>
            </div>

            <uploadImage ref="campusEnvironmentRef" v-model="campusEnvironmentUrl" v-show="false"></uploadImage>
          </div>
        </div>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit" :loading='loading'>保 存</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup lang="ts">
import environment from "@/components/elMain/uploadImageCropper.vue";

const { proxy } = getCurrentInstance();
//counter
import useCounterStore from "@/store/counter";
const counter = useCounterStore();

let formInline = ref({
  isOpen: false,
  banners: [],
  navs: [],
  companyName: "",
  consultationTel: "",
  consultationTime: "",
  mailbox: "",
  address: "",
  wxQr: "",
  campusEnvironment: [], //校区环境
});
let loading = ref(false);
let addBannerImgUrl = ref("");
let campusEnvironmentUrl = ref("");

onMounted(() => {
  getInfo();
});

async function onSubmit() {
  try {
    loading.value = true;
    let query = proxy.$utils.deepcopy(formInline.value);
    let banners = query.banners.sort(proxy.$utils.compare("sort")); //给 banner 排序
    formInline.value.banners = banners;
    await proxy.$apis.webHome({
      data: formInline.value,
      type: "update",
    });
    proxy.$utils.showToast("保存成功");
    getInfo();
  } catch (error) {
  } finally {
    loading.value = false;
  }
}

async function getInfo() {
  let resp = await proxy.$apis.webHome({
    type: "details",
  });
  let query = proxy.$utils.deepcopy(formInline.value);
  formInline.value = proxy.$utils.formatFunction(
    resp,
    proxy.$utils.deepcopy(query)
  );
  if (resp._id) formInline.value["_id"] = resp._id;
}

watch(
  () => addBannerImgUrl.value,
  (newValue, oldValue) => {
    if (newValue) {
      formInline.value.banners.push({ imgUrl: newValue, sort: 0 });
      setTimeout(() => {
        addBannerImgUrl.value = "";
      }, 100);
    }
  },
  { deep: true, immediate: true }
);

watch(
  () => campusEnvironmentUrl.value,
  (newValue, oldValue) => {
    if (newValue) {
      formInline.value.campusEnvironment.push(newValue);
      setTimeout(() => {
        campusEnvironmentUrl.value = "";
      }, 100);
    }
  },
  { deep: true, immediate: true }
);
</script>



<style lang="scss" scoped>
.container {
  margin: 25px;
  .campusEnvironmentBox {
    gap: 15px 15px; //上下间距 左右间距
  }
  .nav {
    margin-top: 10px;
  }

  .banners {
    margin-top: 10px;
    .banner-box {
      margin-right: 15px;
      margin-bottom: 15px;
      width: 100%;
      position: relative;
      .close {
        position: absolute;
        top: -5px;
        right: -5px;
        cursor: pointer;
        background-color: #f55950;
        border-radius: 50%;
      }
      .imgUrl {
        width: 100%;
        height: auto;
        cursor: pointer;
        img {
          width: 100%;
          display: block;
          border-radius: 10px;
          object-fit: cover;
        }
      }
      .el-input {
        margin-top: 10px;
      }
    }
  }
}
</style>






